<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.courier_number" placeholder="快递单号" @keyup.enter.native="searchBtn" size="small"
                              style="width: 160px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.msg" placeholder="失败原因" @keyup.enter.native="searchBtn" size="small"
                              style="width: 160px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker value-format="yyyy-MM-dd" v-model="form.createtime" type="daterange" style="width: 240px" size="small"
                                    range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
                                    :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                <el-table-column prop="courier_number" label="快递单号"></el-table-column>
                <el-table-column prop="datas" label="原因"></el-table-column>
                <el-table-column prop="createtime" label="出库时间"></el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>

import {itemoutFailList} from "@/api/wms/itemout";

export default {
    name: "wms_itemoutFail",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {
                courier_number: "",
                createtime: [
                    new Date(new Date(new Date().toLocaleDateString()).getTime()-3600*1000*24*30),
                    new Date(new Date(new Date().toLocaleDateString()).getTime())
                ],
                msg: ""},
            pickerOptions: {
                shortcuts: [{
                    text: '近7天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            if(this.form.createtime){
                param.createtime = this.form.createtime;
            }
            if(this.form.msg){
                param.msg = this.form.msg;
            }
            if(this.form.courier_number){
                param.courier_number = this.form.courier_number;
            }
            this.loading = true;
            itemoutFailList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
